import React, { useState, useEffect } from "react"
import { Layout } from "antd"
import { Row, Col } from "antd"

import {
  Announcement,
  UserDetail,
  Contents,
  SaltedFish,
  Menus,
  TimeLines,
} from "./Accessories"

const { Header, Footer, Sider, Content } = Layout

const Admin = () => {
  const [menuKey, setMenuKey] = useState("")
  useEffect(() => {
    console.log(menuKey)
  }, [menuKey])
  // 设置菜单选择项
  return (
    <Layout>
      <Header>
        <Row>
          <Col span={22}>
            <Announcement />
          </Col>
          <Col span={2} style={{ color: "#FFFFFF" }}>
            <UserDetail />
            用户名称
          </Col>
        </Row>
      </Header>

      <Content className='content'>
        <Layout style={{ height: "100%" }}>
          <Sider>
            <Menus setMenuKey={setMenuKey} />
          </Sider>

          <Content className='content-content'>
            <TimeLines/>
            <Contents menuKey={menuKey} />
          </Content>
        </Layout>
      </Content>

      <Footer>
        <SaltedFish />
      </Footer>
    </Layout>
  )
}

export default Admin
